<template>
  <div>
    <div>this is component 1</div>
    <div>customCode is {{ customCode }}</div>

    <div>data1 is {{ data1 }}</div>
    <div>data2 is {{ data2 }}</div>

    <hips-button @click="handleClick1"> 事件流 </hips-button>
    <hips-button @click="handleClick2"> 出参 </hips-button>
  </div>
</template>

<script>
import { Button } from '@hips/vue-ui';

export default {
  components: { [Button.name]: Button },
  props: {
    customCode: String,
    data1: [String, Number],
    data2: [String, Number],
    event1: Object,
    setEventFunction: Function,
    handleChangeOutputParams: Function,
    handleRunEvent: Function,
    changeEventParams: Function,
  },
  mounted() {
    console.log('>>> [RemoteEntry] customCode = ', this.customCode);

    console.log('>>> [RemoteEntry] data1 = ', this.data1);

    console.log('>>> [RemoteEntry] data2 = ', this.data2);

    this.setEventFunction('func1', this.func1);

    this.setEventFunction('func2', this.func2);
  },
  methods: {
    func1() {
      console.log('call func1');
      return Promise.resolve();
    },

    func2(param1, param2) {
      console.log('call func2 param1 = ', param1);
      console.log('call func2 param2 = ', param2);
      return Promise.resolve();
    },

    handleClick1() {
      const { flowCode } = this.event1;
      this.handleRunEvent(flowCode);
    },

    handleClick2() {
      this.handleChangeOutputParams({
        name: 'out1',
        value: '111222',
      });

      this.handleChangeOutputParams({
        name: 'out2',
        value: 'aaa',
      });
    },
  },
};
</script>
